<template>
  <el-container>
    <el-aside width="200px" class="left-nav">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>文件管理</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1" @click="goUploadFileView">上传文件</el-menu-item>
            <el-menu-item index="1-2"  @click="goUploadFileView2">上传文件2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main class="right-content">
        <h1>欢迎来到主页</h1>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';


export default {
  name: 'YourComponentName', // 请替换为你组件的实际名称
  components: {
    Document,
    IconMenu,
    Location,
    Setting
  },
  setup() {
    const router = useRouter();

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };

    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };

    const goUploadFileView = () => {
      router.push('/console/uploadView');
    };
    const goUploadFileView2 = () => {
      router.push('/console/uploadView2');
    };

    return {
      handleOpen,
      handleClose,
      goUploadFileView,
      goUploadFileView2
    };
  }
};
</script>

<style scoped>
.left-nav {
  height: 95vh; /* 使导航栏高度延伸到屏幕底部 */
  top: 0;
  left: 0;
}

.right-content {
  /* margin-left: 10px; 与左侧导航栏宽度一致 */
  padding: 20px;
  height: 95vh; /* 使内容区域高度延伸到屏幕底部 */
  /* overflow-y: auto;  */
}
</style>